/**
 * 1 输入框绑定 值改变事件 input事件
 *   1 获取到输入框的值
 *   2 合法性的判断
 *   3 检验通过 把输入框的值 发送到后台
 *   4 返回的数据打印到页面上
 * 2 防止抖动 （定时器）节流
 *   0 防抖 一般 用于输入框中 防止重复输入 重复发送请求
 *   1 节流 一般是用在页面下拉和上拉
 *   1 定义全局的定时器id
 */
import { request } from "../../request/index.js";
Page({

    /**
     * 页面的初始数据
     */
    data: {
        goods: [],
        // 取消 按钮 是否显示
        isFocus: false,
        // 输入框的值
        inpValue: ""
    },
    TimeId: -1,

    // 输入框 值改变事件
    handleInput(e) {
        // 1 获取输入框的值  
        const { value } = e.detail;
        // 2 检测合法性
        if (!value.trim()) {
            clearTimeout(this.TimeId);
            this.setData({
                // 数组重置
                goods: [],
                // 按钮 隐藏
                isFocus: false
            });
            // 值不合法
            return;
        }
        // 3 准备发送请求获取数据
        this.setData({
            isFocus: true
        })
        clearTimeout(this.TimeId);
        // 开启定时器 1000(1s)后才发送请求
        this.TimeId = setTimeout(() => {
            this.qsearch(value);
        }, 1000);

    },
    // 发送请求获取搜索建议 数据
    async qsearch(goods_name) {
        const res = await request({ url: "/goods/getByGoods_name", data: { goods_name } });
        console.log(res);
        this.setData({
            goods: res.data.data
        })
    },

    // 点击 取消按钮
    handleCancel() {
        this.setData({
            inpValue: "",
            isFocus: false,
            goods: []
        })
    }
})